<template>
  <!-- 根据组件状态和插槽内容渲染div元素 -->
  <view
    :class="[
      ns.b(),
      ns.m(modelData.id),
      ...controller.containerClass,
      ns.is('hidden', !controller.state.visible),
    ]"
  >
    <slot></slot>
    <template v-if="!$slots.default && ibiz.env.dev">
      {{ ibiz.i18n.t('vue3Util.panelComponent.noProvidedSlot', { id: modelData.id }) }}
    </template>
  </view>
</template>

<script setup lang="ts">
import { CTX, IControlController } from '@ibiz-template/runtime'
import { IPanelCtrlPos } from '@ibiz/model-core'
import { useNamespace } from '@/use'
import { PanelCtrlPosController } from './i-biz-panel-ctrl-pos.controller'

defineOptions({
  name: 'IBizPanelCtrlPos',
})

// 定义组件接收的属性
const props = defineProps({
  modelData: {
    type: Object as PropType<IPanelCtrlPos>,
    required: true,
  },
  controller: {
    type: Object as PropType<PanelCtrlPosController>,
    required: true,
  },
})

// 注入ctx并监听事件
// const ctx = inject('ctx') as CTX
// ctx.evt.on('onRegister', (name, c) => {
//   if (name === props.modelData.id) {
//     props.controller.bindControl(c as IControlController)
//   }
// })

// 获取命名空间
const ns = useNamespace('panel-ctrl-pos')
</script>
<style lang="scss">
@import './i-biz-panel-ctrl-pos';
</style>
